<!--
 * @Author: David Ma
 * @FilePath: \huaxia-real-estate-web\src\pages\managements\customer-managements.vue
 * @LastEditors: David Ma
 * @Description: 该文件用于管理客户信息
 * @Date: 2023-11-29 10:43:54
-->
<template>
  <!-- 新增客户对话框 -->
  <v-dialog v-model="addDialog" max-width="35rem">
    <v-card>
      <v-card-title>新增客户</v-card-title>
      <v-card-text>
        <VForm @submit.prevent="() => {}">
          <VRow>
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>客户姓名</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="addForm.cltName"
                    prepend-inner-icon="bx-user"
                    placeholder="请输入客户姓名"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>
            <!-- 👉 QQ -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>QQ</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="addForm.cltQq"
                    prepend-inner-icon="bx-user"
                    placeholder="请输入客户QQ"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>
            <!-- 👉 Email -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>电子邮箱</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="addForm.cltEmail"
                    prepend-inner-icon="bx-envelope"
                    placeholder="请输入电子邮箱"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>

            <!-- 👉 Mobile -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>电话号码</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="addForm.cltTel"
                    prepend-inner-icon="bx-mobile"
                    placeholder="请输入电话号码"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>

            <!-- 👉 单位 -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>客户单位</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="addForm.cltUnit"
                    prepend-inner-icon="bx-lock"
                    placeholder="请输入客户单位"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>
          </VRow>
        </VForm>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="addDialog = false">取消</v-btn>
        <v-btn @click="createClient()">创建</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <!-- 修改员工信息对话框 -->
  <v-dialog v-model="modifyDialog" max-width="35rem">
    <v-card>
      <v-card-title>修改客户信息</v-card-title>
      <v-card-text>
       <VForm @submit.prevent="() => {}">
          <VRow>
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>客户姓名</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="modifyForm.cltName"
                    prepend-inner-icon="bx-user"
                    placeholder="请输入客户姓名"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>
            <!-- 👉 QQ -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>QQ</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="modifyForm.cltQq"
                    prepend-inner-icon="bx-user"
                    placeholder="请输入客户QQ"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>
            <!-- 👉 Email -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>电子邮箱</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="modifyForm.cltEmail"
                    prepend-inner-icon="bx-envelope"
                    placeholder="请输入电子邮箱"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>

            <!-- 👉 Mobile -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>电话号码</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="modifyForm.cltTel"
                    prepend-inner-icon="bx-mobile"
                    placeholder="请输入电话号码"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>

            <!-- 👉 单位 -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>客户单位</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="modifyForm.cltUnit"
                    prepend-inner-icon="bx-lock"
                    placeholder="请输入客户单位"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>
          </VRow>
        </VForm>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="modifyDialog = false">取消</v-btn>
        <v-btn @click="modifyClient()">修改</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <VRow>
    <VCol cols="12">
      <VCard>
        <VRow>
          <!-- 👉 First Name -->
          <span class="d-flex align-center ml-10">客户ID</span>
          <VCol cols="12" md="3">
            <VTextField
              v-model="searchForm.cltNo"
              label="客户ID"
              placeholder="请输入客户ID"
              class="my-5"
            />
          </VCol>
          <span class="d-flex align-center">客户姓名</span>
          <!-- 👉 Last Name -->
          <VCol cols="12" md="3">
            <VTextField
              v-model="searchForm.cltName"
              label="客户姓名"
              placeholder="请输入客户姓名"
              class="my-5"
            />
          </VCol>
          <!-- 👉 选择框 -->
          <span class="d-flex align-center">客户电话</span>
          <VCol cols="12" md="3">
            <VTextField
              v-model="searchForm.cltTel"
              label="客户电话"
              placeholder="请输入客户电话"
              class="my-5"
            />
          </VCol>
        
      
          <VCol cols="12" md="1" class="d-flex align-center">
            <v-btn color="primary" @click="search">搜索</v-btn>
          
          </VCol>
          
        </VRow>
      </VCard>
    </VCol>

    <VCol cols="12">
      <VCard>
        <div class="d-flex justify-space-between align-center mt-4 mb-4">
          <VCardTitle>客户管理页面</VCardTitle>
          <v-btn color="primary" @click="reset()" style="margin-right: 50rem;">重置</v-btn>
          <v-btn
            icon="bx-plus"
            size="small"
            style="margin-right: 6.75rem;"
            @click="addDialog = true"
          />
        </div>
        <VDivider />
        <VTable style="height: 520px;" fixed-header>
          <thead>
            <tr>
              <th class="text-uppercase">客户ID</th>
              <th>姓名</th>
              <th>电话号</th>
              <th>QQ</th>
              <th>邮箱</th>
              <th>单位</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="item in clients">
              <td>
                {{ item.cltNo }}
              </td>
              <td class="text-center">
                {{ item.cltName }}
              </td>
              <td class="text-center">
                {{ item.cltTel }}
              </td>
              <td class="text-center">
                {{ item.cltQq }}
              </td>
              <td class="text-center">
                {{ item.cltEmail }}
              </td>
              <td class="text-center">
                {{ item.cltUnit }}
              </td>
              <td class="text-center">
                <VBtn @click="openModifyDialog(item)">修改</VBtn>
              </td>
            </tr>
          </tbody>
        </VTable>
      </VCard>
    </VCol>
  </VRow>
</template>

<script setup lang="ts">
import { Client, addClient, getAllClients, getClientsByCondition, modifyClientInfo } from "@/api/client";
import { useUserStore } from "@/store";
import { Message } from "@arco-design/web-vue";

const addDialog = ref(false);
const modifyDialog = ref(false);
const userInfo = useUserStore();
const clients = ref<Client>({});
//定义模糊搜索表单
const searchForm = ref<Client>({});
//定义addForm表单
const addForm = ref<Client>({});
//定义modifyForm表单
const modifyForm = ref<Client>({});
onMounted(async () => {
  try {
    // 获取所有客户
    const res = await getAllClients();
    clients.value = res.data.data;
  } catch (err) {
    Message.error("获取数据失败");
  }
});
//模糊搜索
const search = async () => {
  try {
    const res = await getClientsByCondition(searchForm.value);
    clients.value = res.data.data;
  } catch (err) {
    Message.error("获取数据失败");
  }
};
//添加客户
const createClient = async () => {
  try {
    const response = await addClient(addForm.value);
    if (response.data.code === 200) {
      Message.success('客户添加成功');
      addDialog.value = false;
    // 刷新所有客户
    const res = await getAllClients();
    clients.value = res.data.data;

    } else {
      Message.error('添加客户失败' );
    }
  } catch (error) {
    Message.error('网络错误或服务器异常');
  }
};
const openModifyDialog = (item:Client) => {
  modifyDialog.value = true;
  modifyForm.value = item;
};

// Function to modify an existing client
const modifyClient = async () => {
  try {
    const response = await modifyClientInfo(modifyForm.value);
    if (response.data.code === 200) {
      Message.success('客户信息修改成功');
      modifyDialog.value = false;
    // 刷新所有客户
    const res = await getAllClients();
    clients.value = res.data.data;

    } else {
      Message.error('客户信息修改失败' );
    }
  } catch (error) {
    Message.error('网络错误或服务器异常');
  }
};
//重置
const reset = async () => {
    try {
    // 获取所有客户
    const res = await getAllClients();
    if(res.data.code === 200)
    {
      clients.value = res.data.data;
      Message.success("重置成功")
    }else{
      Message.error("重置失败")
    }
    

  } catch (err) {
    Message.error("获取数据失败");
  }
}

</script>
